<template>
  <div class="home-contain">
    <div class="header">
      <img class="logo" src="@/assets/images/logo2.png" />
      <van-search v-model="value" placeholder="请输入搜索关键词" @focus="$router.push('/search')" />
    </div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image.img" class="img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :border="false" :column-num="4">
      <van-grid-item @click="$router.push('/mediagoods')">
        <img src="../assets/images/menu10.png" />
        <span>数码电器</span>
      </van-grid-item>
      <van-grid-item @click="$router.push('/newslist')">
        <img src="../assets/images/menu19.png" />
        <span>乐淘热点</span>
      </van-grid-item>
      <van-grid-item @click="$router.push('/classify')">
        <img src="../assets/images/menu17.png" />
        <span>分类商品</span>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/more.png" />
        <span>查看更多</span>
      </van-grid-item>
    </van-grid>
    <goods></goods>
    <BackTop></BackTop>
  </div>
</template>

<script>
import BackTop from "@/component/BackTop.vue";
import { reqGetLunbo } from "@/api";
import Goods from "@/component/Goods.vue";
export default {
  components: { Goods, BackTop },
  data() {
    return {
      value: "",
      images: [],
    };
  },

  async mounted() {
    // 加载轮播图数据
    let { message } = await reqGetLunbo();
    this.images = message;
  },
};
</script>

<style lang="scss" scoped>
.home-contain {
  //头部
  .header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;

    .logo {
      width: 70px;
      height: 40px;
      margin: 0 5px;
    }

    .van-search {
      flex: 1;
    }
  }
  // 轮播图
  .van-swipe {
    height: 200px;

    .img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .van-grid {
    .van-grid-item {
      height: 90px;
    }

    img {
      width: 39px;
      height: 39px;
    }

    span {
      font-size: 14px;
    }
  }
}
</style>
